<template>
  <div>
    <div class="picture">
      <el-button type="primary" plain>上传图片</el-button>
    </div>
    <div class="picture-ul">
      <div class="picture-li" v-for="(src, i) in image" :key="i">
        <div class="picture-image">
          <img :src="src.url" />
        </div>
        <div class="picture-btn">
          <el-button type="danger" size="mini" @click="getDel(src.id)">删除图片</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: [
        {
          id: 1,
          url:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=224224572,664939372&fm=26&gp=0.jpg"
        },
        {
          id: 2,
          url:
            "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1725094676,1995852478&fm=26&gp=0.jpg"
        },
        {
          id: 3,
          url:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2053049719,3383602540&fm=26&gp=0.jpg"
        },
        {
          id: 4,
          url:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1640067994,2916999316&fm=26&gp=0.jpg"
        }
      ]
    };
  },
  methods: {
      getDel(id){
          console.log(id)
      }
  }
};
</script>

<style scoped>
.picture {
  padding-bottom: 10px;
}
.picture-ul {
  padding: 10px;
  display: flex;
  display: -webkit-flex;
  flex-direction: row; /*决定主轴的方向*/
  flex-wrap: wrap;
}
.picture-li {
  text-align: center;
  height: auto;
  flex: 0 1 140px;
  box-sizing: border-box;
  margin: 10px;
  border: 1px solid #eeeff1;
  padding: 10px;
}
.picture-image img {
  width: 120px;
  height: 120px;
}
.picture-btn{
    margin-top: 10px;
}
</style>
